<template>
  <div class="TqCharts">
    <div v-for="(item, i) of tqArr" :key="i" class="tqArea">
      <div>
        <div class="date">{{item.date}}</div>
        <div class="font28">{{item.text}}</div>
      </div>
      <div class="font28">{{item.fl}}</div>
    </div>
    <div id="canvasArea">
      <canvas id="myCanvas" v-if="isShowCanvas" :width="canvasW" :height="canvasH">Your browser does not support the HTML5 canvas tag.</canvas>
    </div>
  </div>
</template>
<script>
// import * as echarts from 'echarts'
export default {
  props: {
    tqArr: {
      type: Array,
      default: () => []
    },
    dwColor: {
      type: String,
      default: "blue"
    },
    gwColor: {
      type: String,
      default: "red"
    }
  },
  data() {
    return {
      isShowCanvas: false,
      timer: null,
      canvasW: 0,
      canvasH: 0
    };
  },
  mounted() {
    setTimeout(() => {
      const canvaArea = document.querySelector("#canvasArea");
      this.canvasW = canvaArea.offsetWidth;
      this.canvasH = canvaArea.offsetHeight;
      this.isShowCanvas = true;
      this.$nextTick(() => {
        this.initTqx();
      });
    }, 3000);
    // this.$nextTick(() => {
    //   const canvaArea = document.querySelector("#canvasArea");
    //   this.canvasW = canvaArea.offsetWidth;
    //   this.canvasH = canvaArea.offsetHeight;
    //   this.isShowCanvas = true;
    //   this.$nextTick(() => {
    //     this.initTqx();
    //   });
    // });
  },
  methods: {
    initTqx() {
      // const dwArr = [11, 12, 13, 14, 16, 18, 20]
      // const gwArr = [22, 24, 26, 25, 32, 21, 28]
      const dwArr = [];
      const gwArr = [];
      this.tqArr.forEach(el => {
        dwArr.push(el.dw);
        gwArr.push(el.gw);
      });
      const barLength = dwArr.length;
      const wdArr = [...dwArr, ...gwArr];
      const min = Math.min(...wdArr) - 2;
      const max = Math.max(...wdArr) + 2;
      const abc = document.querySelector(".tqArea");
      // 第一个起点位置
      const barWidth = abc.offsetWidth;
      const canvasHeight = abc.offsetHeight * 0.6;
      const fs = canvasHeight / (max - min);
      const startX = barWidth / 2;
      const canvasArea = document.querySelector("#canvasArea");
      // 计算后边的点X位置
      const bc = Math.ceil((canvasArea.offsetWidth - barWidth * barLength) / (barLength - 1));
      const xArr = [];
      for (let i = 0; i < barLength; i++) {
        xArr.push(startX + (barWidth + bc) * i);
      }
      const y1Arr = gwArr.map(el => {
        return Math.ceil((max - el) * fs);
      });
      const y2Arr = dwArr.map(el => {
        return Math.ceil((max - el) * fs);
      });
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      // 高温划线
      for (let i = 0; i < barLength - 1; i++) {
        ctx.beginPath();
        ctx.lineWidth = "5";
        ctx.strokeStyle = this.gwColor;
        ctx.moveTo(xArr[i], y1Arr[i]);
        ctx.lineTo(xArr[i + 1], y1Arr[i + 1]);
        ctx.stroke(); // 进行绘制
      }
      // 低温划线
      for (let i = 0; i < barLength - 1; i++) {
        ctx.beginPath();
        ctx.lineWidth = "5";
        ctx.strokeStyle = this.dwColor;
        ctx.moveTo(xArr[i], y2Arr[i]);
        ctx.lineTo(xArr[i + 1], y2Arr[i + 1]);
        ctx.stroke(); // 进行绘制
      }
      const frag = document.createDocumentFragment();
      // 高温
      y1Arr.forEach((el, i) => {
        // 添加节点
        const d = document.createElement("div");
        d.style.position = "absolute";
        d.style.top = `${el - 6}px`;
        d.style.left = `${xArr[i] - 5}px`;
        d.style.width = "10px";
        d.style.height = "10px";
        d.style.borderRadius = "50%";
        d.style.background = "#fff";
        // 添加下边文字
        const text = document.createElement("div");
        text.style.color = "#fff";
        text.style.position = "absolute";
        text.style.top = `${el - 22}px`;
        text.style.left = `${xArr[i] - 9}px`;
        text.innerText = gwArr[i] + "℃";
        text.style.fontSize = "12px";
        frag.appendChild(d);
        frag.appendChild(text);
      });
      // 低温
      y2Arr.forEach((el, i) => {
        const d = document.createElement("div");
        d.style.position = "absolute";
        d.style.top = `${el - 4}px`;
        d.style.left = `${xArr[i] - 5}px`;
        d.style.width = "10px";
        d.style.height = "10px";
        d.style.borderRadius = "50%";
        d.style.background = "#fff";
        // 添加上边文字
        const text = document.createElement("div");
        text.style.color = "#fff";
        text.style.position = "absolute";
        text.style.top = `${el + 7}px`;
        text.style.left = `${xArr[i] - 9}px`;
        text.innerText = dwArr[i] + "℃";
        text.style.fontSize = "12px";
        frag.appendChild(d);
        frag.appendChild(text);
      });
      canvasArea.appendChild(frag);
    }
  }
};
</script>
<style lang="less" scoped>
.TqCharts {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  #canvasArea {
    position: absolute;
    width: 100%;
    height: 55%;
    top: 23%;
  }
  .tqArea {
    color: #fff;
    width: 6%;
    background: #0066ff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3px 0;
    .font28 {
      font-size: 14px;
    }
    .date {
      margin-bottom: 2px;
      font-size: 14px;
    }
    div {
      text-align: center;
    }
  }
}
</style>
